<template>
  <div>
    <h1 id="hh">{{ msg }}</h1>
    <button @click="change">点我修改 msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '大 h1'
    }
  },
  methods: {
    change() {
      this.msg = '小 h1'
      // 获取页面上的元素内容
      // const h1 = document.querySelector('#hh')
       //console.log('数据:', this.msg)
      //console.log('DOM:', h1.innerHTML) // 大 h1
      // 为什么?
      // 原因: DOM 更新是异步的
      // Vue 响应式的特性, 修改数据后, 页面会自动更新, 而更新 DOM 这个操作是异步的
      // 如何解决?
      // 解决方案: 等 DOM 更新完毕后再获取
      // 方法: this.$nextTick(回调函数)
      // 回调函数会在下一次 DOM 更新完毕后执行
      
      this.$nextTick(() => {
        const h1 = document.querySelector('#hh')
        console.log('数据:', this.msg)
        console.log('DOM:', h1.innerHTML) // 小
      })
    }
  }
}
</script>